"use client"

import { useState, useEffect } from "react"
import { Dimensions, Platform } from "react-native"

interface DeviceInfo {
  width: number
  height: number
  isTablet: boolean
  isSmallPhone: boolean
  isLargePhone: boolean
  isIPhone16: boolean
  orientation: "portrait" | "landscape"
  platform: "ios" | "android" | "web"
}

export function useDeviceInfo(): DeviceInfo {
  const [dimensions, setDimensions] = useState(() => {
    const { width, height } = Dimensions.get("window")
    return { width, height }
  })

  useEffect(() => {
    const subscription = Dimensions.addEventListener("change", ({ window }) => {
      setDimensions({ width: window.width, height: window.height })
    })

    return () => subscription?.remove()
  }, [])

  const { width, height } = dimensions
  const isTablet = width >= 768
  const isSmallPhone = width < 375
  const isLargePhone = width >= 414
  // iPhone 16 检测 (393x852)
  const isIPhone16 = width >= 390 && width <= 400
  const orientation = width > height ? "landscape" : "portrait"
  const platform = Platform.OS as "ios" | "android" | "web"

  return {
    width,
    height,
    isTablet,
    isSmallPhone,
    isLargePhone,
    isIPhone16,
    orientation,
    platform,
  }
}
